<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>准备开始</title>
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<style type="text/css">
			body {
			    width: 100%;
			    height: 100%;
				font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
				user-select: none;
			    color: #555555;
			    animation-duration: 1s;
			}
			.detail {
			    padding: 40px;
			    min-height: 300px;
			    height: fit-content;
			    font-size: 24px;
			    letter-spacing: 3px;
			    line-height: 30px;
			    display: flex;
			    text-align: center;
			}
			
			.choice {
			    width: 710px;
			}
			
			.judgeList {
			    width: 440px;
			}
			
			.present {
			    width: 320px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header :class="{xHeader:true}" id="head" style="width: 60%; margin: auto;">
				{{head}}
			</header>
			<div class="xTurn detail" style="display: flex;">
				<div class="choice">
					<div class="listHeader">
						选手
					</div>
					<div class="list">
						<div v-for="ch in choices">
							{{ch.detail}}
						</div>
					</div>
				</div>
				<div class="judgeList">
					<div class="listHeader">
						裁判
					</div>
					<div class="list">
						<div v-for="(index) in presented">
							{{index}}
						</div>
						<div v-for="(not) in notPresented" style="color: #7C706B;">
							{{not}}
						</div>
					</div>
				</div>
				<div class="present">
					<div class="listHeader">
						到场情况
					</div>
					<div class="list">
						<div v-for="pre in presented">
							到场
						</div>
						<div v-for="not in notPresented" style="color: #7C706B;">
							未到场
						</div>
					</div>
				</div>
			</div>
			<div class="xButton xLongButton" id="start" style="margin: 18px; width: 61.8%;margin: auto;" @click="start">
				<div class="centerText">现在开始>></div>
			</div>
		</div>

		<script type="application/javascript">
			let axGet;
			let axPost;

			function getUrlParam(name) {
				const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				const r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}

			function stringify(obj) {
				let res = "";
				for (let pro in obj)
					res += "&" + pro + "=" + obj[pro];
				return res.substr(1);
			}

			const app = new Vue({
				el: '#app',
				data: {
					turnId: -1,
					ballot: "",
					list: [],
					refreshIntervalId:null,
					choices: [],//每个对象包含选项和得分
					judges:[],
					presented:[],
					notPresented:[],
					head : "要开始了, 准备好了吗?",
					axGet:{},
					axPost:{}
				},
				methods: {
					refresh: function() {
						if(this.refreshIntervalId != null) return;
						this.refreshIntervalId = setInterval(()=>{
							this.axGet
									.get("/turn/prepare", {
										params: {
											id: this.turnId
										}
									})
									.then(resp => {
										this.head = "要开始了, 准备好了吗?";
										this.ballot = '';
										this.ballot = resp.data.value.name;
										this.list = [];
										this.list = resp.data.value.turn;
										this.choices = [];
										this.choices = resp.data.value.turn[0].choices;
										this.judges = [];
										this.judges = resp.data.value.turn[0].judge;
										this.presented = [];
										this.presented = resp.data.value.presented;
										this.notPresented = [];
										let flag = false;
										for (let it in this.judges) {
											flag = false;
											for (let obj in this.presented) {
												if(it === obj) {
													flag = true;
													break;
												}
											}
											if (!flag)  this.notPresented.push(this.judges[it]);
										}
									})
									.catch(err => {
										this.head = "数据请求似乎出错了, 请刷新页面重试或者检查网络";
									})
						}, 1500);
					},
					
					stopRefresh:function(){
						clearInterval(this.refreshintervalid);
						this.refreshintervalid = null;
					},
					start:function(){
						this.axPost
							.post("/turn/start", stringify({
								id:this.turnId
							}), {
								headers: {'Content-Type': 'application/x-www-form-urlencoded',}
							})
							.then(resp=>{
								if (resp.data.status === false){
									if (resp.data.value === "exist"){
										alert("这个投票已经在进行中了, 无法再次开启.");
										this.head = "这个投票已经在进行中了, 无法再次开启.请刷新页面重试";
									}
								}
								window.location.href = "vote.html?id="+this.turnId;
							})
							.catch(()=>{
								this.head = "出现异常, 请重新登录";
							})
					}
				},
				components: {},
				created: function() {
					this.turnId = getUrlParam("id");
					this.axGet = axios.create({
						url: window.location.host,
						method: "get",
						responseType: 'json'
					});
					this.axPost = axios.create({
						url: window.location.host,
						method: "post",
						responseType: "json",
						contentType: "application/x-www-form-urlencoded"
					});
					
					this.axGet
						.get("/captcha/login", {
							params: {}
						})
						.then(resp => {
							if (resp.data.status === false) {
								alert("请先登录")
								window.location.href = "index.html";
							}
						})
						.catch(err => {
							window.location.href = "index.html";
						});

					this.axGet
						.get("/turn/isReady", {
							params: {
							}
						})
						.then(resp => {
							if (resp.data.status === true) {
								window.location.href = "vote.html";
							}
						})
						.catch(err => {
							window.location.href = "index.html";
						});
						
					this.refresh();
					},
				
				mounted: function() {
					$(".xButton")
						.mouseenter(function() {
							$(this).css("background-color", "#3a3f4d");
						})
						.mouseleave(function() {
							$(this).css("background-color", "#555555");
						});
				}
			});
		</script>
	</body>
</html>
